<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<input type="text" id="username"><br>
		<button id="add_user">添加</button><br />
		<table id="userlist" border="1" width="200px" cellspacing="0" hidden> <!-- 默认隐藏 -->
			<thead>
				<tr>
					<th>编号</th>
					<th>名字</th>
					<th>操作</th>
				</tr>
			</thead>
		</table>
		<button id="lucky_one">幸运一抽</button><br />
		<div id="show"></div>

		<script src="jquery1.12.4.min.js"></script>
		<script>
			var indexs = [];  //储存 id的数组
			var names = [];  //储存 名字的数组
			var id = 1;      // 初始化 id 从1开始
			$(function() {

				$("#add_user").click(function() {  //点击添加
					var temp_name = $("#username").val();  //获取输入框输入的名字
					//将人名 和 id写到表格里
					$("#userlist").append("<tr><td>" + id + "</td><td>" + temp_name +
						"</td><td><button onclick='del(this)'>删除</button></td></tr>");  
					indexs.push(id); //把id加入到id数组中
					id++;    //id自增  再添加新人时 需要
					names.push(temp_name);  //把人名添加到名字数组中
					if ($("tr").length >= 2) {  //表格默认隐藏  如果表格里有人  取消隐藏
						$("#userlist").prop("hidden", false);
					}
				});

				$("#lucky_one").click(function() {  //点击幸运一抽
					var random_index = Math.floor(Math.random() * names.length);  //生成随机下标
					$("#show").text(names[random_index]);  //随机从名字数组中 获取人名
				});
			});

			function del(x) {  //点击删除按钮触发
				// alert($(x).parent().prev().text());
				var del_id = $(x).parent().prev().prev().text();  //储存删除这行的id
				var del_name = $(x).parent().prev().text();  //储存删除这行的人名
				var del_i = 0;  //初始化 要删除元素的下标 
				for (var i = 0; i <= indexs.length - 1; i++) {  //寻找要删除元素的下标  在id数组中找
					if (del_id == indexs[i]) {
						del_i = i;
						break;
					}
				}
				indexs.splice(del_i, 1);  //在id数组中 删除该id
				names.splice(del_i, 1);  //在人名数组中  删除该位置的人名
				// console.log(names);
				$(x).parent().parent().remove();  //在表格中删除该行tr
				if ($("tr").length < 2) {  //如果表格里没人  隐藏表格
					$("#userlist").prop("hidden", true);
				}
			}
		</script>
	</body>
</html>
